<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- ie8开启标准渲染模式 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
	<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="lib/animate/animate.css">
	<link rel="stylesheet" href="css/common.css">
	<title>bootstrap-项目实战</title>
</head>
<body>
<!-- 固定导航 -->
<nav class="navbar navbar-default navbar-fixed-top mz-navbar">
	<div class="container">
		<!-- 这个navbar-header是给内部两个元素包了一层通栏盒子，自身是清除浮动的作用,控制的是导航垂直布局 -->
		<div class="navbar-header">
			<!-- 右边按钮 -->
			<!-- navbar-toggle控制按钮只在移动端显示。data-toggle是js功能标志，js会找到这个元素注册点击事件 -->
			<button type="button" class="navbar-toggle" data-toggle='collapse' data-target='.navbar-collapse'>
				<div class="icon-bar"></div>
				<div class="icon-bar"></div>
				<div class="icon-bar"></div>
			</button>
			<!-- 左边logo -->
			<a class="navbar-brand " href="/">Maizi Admin</a>
		</div>
		<!-- 需要折叠的内容,collaspe表示折叠默认隐藏，配合navbar-collapse宽频默认显示、移动端隐藏 -->
		<div class="navbar-collapse collapse">
			<!-- navbar-nav控制移动端时li为block,nav控制li为float -->
			<!-- nav类本质是让ul下的li左浮动水平排列，并设置ul和li的样式,也就是基本的导航样式 -->
			<ul class="nav navbar-nav navbar-right">
        <li><a href="#home">首页</a></li>
        <li><a href="#bbs">论坛</a></li>
        <li><a href="#html5">前端开发</a></li>
        <li><a href="#course">最新课程</a></li>
        <li><a href="#app">移动APP</a></li>
        <li><a href="#concat">联系我们</a></li>
      </ul>
		</div>
	</div>
</nav>
<!-- 固定导航 -->

<!-- 第一屏home -->
<section id="home">
	<!-- 背景滤镜层，不影响文字,父级原本没高度，因此只能被撑开 -->
	<div class="master">
		<div class="container">
			<div class="row text-center wow fadeInUp" data-wow-delay='1s' data-wow-duration='1s'>
				<div class="col-sm-10 col-sm-offset-1 ">
					<h3 class="h1"><strong>bootstrap实战课程等你来战！</strong></h3>
					<p>
	            本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员<br />
							培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！
	        </p>
	        <img src="images/php.jpg" alt="php开发" class="img-responsive">
				</div>
			</div>
		</div>
	</div>
</section>
<!-- 第一屏home -->
<!-- 第二屏bbs -->
<section id="bbs" class="text-center">
	<div class="container">
		<div class="row">
			<div class="col-md-4 bbs-item">
				<!-- img-responsive控制的是最大宽度不超过100%，以达到自适应效果 -->
				<img src="images/a.png" class="img-responsive" alt="">
				<h3>Android开发</h3>
				<p>Android开发技术交流、问题求助、实战案例分享</p>
			</div>
			<div class="col-md-4 bbs-item">
				<img src="images/i.png" class="img-responsive" alt="">
				<h3>IOS开发</h3>
				<p>iOS开发技术交流，海量iOS实战干货分享</p>
			</div>
			<div class="col-md-4 bbs-item">
				<img src="images/b.png"  class="img-responsive"alt="">
				<h3>嵌入式底层开发</h3>
				<p>底层嵌入式开发、实战案例等技术交流讨论</p>
			</div>
		</div>
	</div>
</section>
<!-- 第二屏bbs -->
<!-- 第三屏html5 -->
<section id="html5">
	<div class="container">
		<div class="row">
			<div class="col-md-6 wow slideInLeft">
				<h3>HTML5前端开发</h3>
				<p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
				<p><span class="glyphicon glyphicon-grain icon-bg"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
				<p><span class="glyphicon glyphicon-grain icon-bg"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
			</div>
			<div class="col-md-6 wow slideInRight">
				<img src="images/html5.jpg" class="img-responsive" alt="html5">
			</div>
		</div>
	</div>
</section>
<!-- 第三屏html5 -->
<!-- 第四屏bootstrap -->
<section id="bootstrap">
	<div class="container">
		<div class="row wow fadeInUp">
			<div class="col-md-6">
				<img src="images/Bootstrap.jpg" alt="Bootstrap" class="img-responsive">
			</div>
			<div class="col-md-6">
				<h3>bootstrap实战视频教程</h3>
				<p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
				<p>
					<span class="glyphicon glyphicon-grain icon-bg"></span>
					你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备。
				</p>
				<p>
					<span class="glyphicon glyphicon-grain icon-bg"></span>Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。
				</p>
			</div>
		</div>
	</div>
</section>
<!-- 第四屏bootstrap -->
<!-- 第五屏course -->
<section id="course">
	<div class="container">
		<div class="row text-center">
			<div class="col-md-12"><h3>最新课程</h3></div>
			<div class="col-md-3">
				<div class="course">
					<img src="images/swift.jpg" alt="swift" class="img-responsive">
					<a href="http://www.maiziedu.com" class="btn btn-default">加入学习</a>
				</div>
			</div>
			<div class="col-md-3">
				<div class="course">
					<img src="images/swift.jpg" alt="swift" class="img-responsive">
					<a href="http://www.maiziedu.com" class="btn btn-default">加入学习</a>
				</div>
			</div>
			<div class="col-md-3">
				<div class="course">
					<img src="images/swift.jpg" alt="swift" class="img-responsive">
					<a href="http://www.maiziedu.com" class="btn btn-default">加入学习</a>
				</div>
			</div>
			<div class="col-md-3">
				<div class="course">
					<img src="images/swift.jpg" alt="swift" class="img-responsive">
					<a href="http://www.maiziedu.com" class="btn btn-default">加入学习</a>
				</div>
			</div>
			<div class="col-md-3">
				<div class="course">
					<img src="images/swift.jpg" alt="swift" class="img-responsive">
					<a href="http://www.maiziedu.com" class="btn btn-default">加入学习</a>
				</div>
			</div>
			<div class="col-md-3">
				<div class="course">
					<img src="images/swift.jpg" alt="swift" class="img-responsive">
					<a href="http://www.maiziedu.com" class="btn btn-default">加入学习</a>
				</div>
			</div>
			<div class="col-md-3">
				<div class="course">
					<img src="images/swift.jpg" alt="swift" class="img-responsive">
					<a href="http://www.maiziedu.com" class="btn btn-default">加入学习</a>
				</div>
			</div>
			<div class="col-md-3">
				<div class="course">
					<img src="images/swift.jpg" alt="swift" class="img-responsive">
					<a href="http://www.maiziedu.com" class="btn btn-default">加入学习</a>
				</div>
			</div>			
		</div>
	</div>
</section>
<!-- 第五屏course -->
<!-- 第六屏app -->
<section id="app">
	<div class="container">
		<div class="row wow fadeInUp">
			<div class="col-md-6">
				<h3>麦子学院移动APP下载</h3>
				<p>
	         全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！
	      </p>
				<button class="btn">
					<span class="glyphicon glyphicon-download-alt"></span>
	        iPhone版
	      </button>
				<button class="btn">
					<span class="glyphicon glyphicon-download-alt"></span>
	        Android版
				</button>
			</div>
			<div class="col-md-6">
				<img src="images/app-banner.jpg" alt="" class="img-responsive">
			</div>
		</div>
	</div>
</section>
<!-- 第六屏app -->
<!-- 第七屏concat -->
<section id="concat">
	<div class="mask">
		<div class="container">
			<div class="row">
				<div class="col-md-6 wow fadeInLeft">
					<h3><span class="glyphicon glyphicon-send"></span>联系小麦</h3>
					<p class="intro">
	           麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！
					</p>
					<address>
						<p><span class="glyphicon glyphicon-home"></span>地址:成都市高新区天府软件园D5-11</p>
						<p><span class="glyphicon glyphicon-phone-alt"></span>联系电话：028-86567913</p>
						<p><span class="glyphicon glyphicon-envelope"></span>邮箱:hr@maiziedu.com</p>
					</address>
				</div>
				<div class="col-md-6 wow fadeInRight">
					<!-- 1、 表单组件笔记： input-group设置了display：table,子元素form-control和input-group-addon共同组成了table-cell,形成块级表格它能让input-group-addon宽度固定，form-control宽度自适应 -->
					<!-- 2、 form-inline控制子元素为inline-block，而没有form-inline的form-group本身是100%宽 -->
					<!-- 3、 form-group下的文字加粗以配合label。因此单独设置了同级checkbox类，不加粗文字且让文字中线对齐 -->
					<!-- 4、 input-group区别于form-group,form-group主要作用是控制元素为100%宽还是内联 -->
					<!-- 5、 form-horizontal来实现栅格系统，form-group表现为row,control-label来调整列中的label文字格式 -->
					<!-- 6、 内联单选框可以用form-inline包裹checkbox（checkbox代替form-group），checkbox本身是1行,内部配合label包裹单选框和文字 不要form-control。 或者，给label加checkbox-inline类 -->
					<form action="#" method="post" class="horizontal">
						<div class="form-group">
							<div class="col-md-6">
								<input type="text" placeholder="您的姓名" class="form-control">
							</div>
							<div class="col-md-6">
								<input type="email" placeholder="您的邮箱" class="form-control">
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-12">
								<input type="text" placeholder="标题" class="form-control">
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-12">
								<!-- 这个rows=4是4行字的意思，高度随font-size变化 -->
								<textarea rows="4" class="form-control" placeholder="留言内容"></textarea>
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-8">
								<button type="submit" class="btn btn-primary form-control">提交</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- 第七屏concat -->
<!-- footer -->
<footer>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<p class="text-center">
            Copyright&nbsp;&copy;&nbsp;2012-2015&nbsp;&nbsp;www.maiziedu.com&nbsp;&nbsp;蜀ICP备13014270号-4
        </p>
			</div>
		</div>
	</div>
</footer>
<!-- footer -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="lib/jquery-lib/jquery.singlePageNav.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script>
	$(function ($) {
		// 原理是计算元素距离顶部距离 用定时器改变距离
		$('.nav').singlePageNav({offset: 70})
		// 内容可视时加动画
		new WOW().init()
		// 移动端点击隐藏折叠
		$('.navbar-nav a').on('click', function () {
			// bootstrap文档里有,就是去触发这个按钮的显示隐藏事件
			$('.navbar-collapse').collapse('hide')
		})
	})
</script>
</body>
</html>